<!--CEO看板-->
<template>
  <div class="dashboard">
    <!-- 侧边栏-->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="logo">
          <img src="@/assets/logo1.png" alt="ERP Logo" width="40" height="40"/>
        </div>
      </div>

      <nav class="sidebar-nav">
        <div
          v-for="item in menuItems"
          :key="item.id"
          class="nav-item"
          :class="{ active: activeModule === item.id }"
          @click="setActiveModule(item.id)"
        >
          <div class="nav-icon">
            <i :class="item.icon"></i>
          </div>
          <span class="nav-text">{{ item.name }}</span>
        </div>
      </nav>
    </div>

    <!-- 左中边栏-->
    <div class="middle-sidebar">
      <div class="module-header">
        <h3>{{ currentModuleContent.title }}</h3>
      </div>
      <div class="module-menu">
        <div v-for="(group, index) in currentModuleContent.groups" :key="index" class="module-group">
          <div class="group-header" @click="toggleGroup(group)">
            <span>{{ group.title }}</span>
            <i class="toggle-icon" :class="{ 'is-open': group.isOpen }"></i>
          </div>
          <div v-if="group.isOpen" class="group-items">
            <div
              v-for="item in group.items"
              :key="item.name"
              class="module-item"
              :class="{ active: item.name === activeSubMenu }"
              @click="handleSubMenuClick(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <component :is="activeView" @navigate="handleNavigate"></component>
    </div>
  </div>
</template>

<script>
import SalesWorkbench from './SalesWorkbench.vue';
import ProcurementWorkbench from './ProcurementWorkbench.vue';
import DashboardContent from '@/components/DashboardContent.vue';
import CeoDashboard from '@/components/CeoDashboard.vue';
import CustomerManagement from '../sale/CustomerManagement.vue';
import QuotationManagement from '../sale/QuotationManagement.vue';
import QuotationDetail from '../sale/QuotationDetail.vue';
import SalesOrder from '../sale/SalesOrder.vue';
import SalesDetail from '../sale/SalesDetail.vue';
import ShippingDetail from '../sale/ShippingDetail.vue';
import DeliveryManagement from '../sale/DeliveryManagement.vue';
import ProductionPlan from '../produce/ProductionPlan.vue';
import ProductionWorkOrder from '../produce/ProductionWorkOrder.vue';
import ProcessTask from '../produce/ProcessTask.vue';
import ProductionReporting from '../produce/ProductionReporting.vue';
import ProductionPicking from '../produce/ProductionPicking.vue';
import ProductionWarehousing from '../produce/ProductionWarehousing.vue';
import InventoryDetail from '../warehouse/InventoryDetail.vue';
import InboundOrder from '../warehouse/InboundOrder.vue';
import InboundDetail from '../warehouse/InboundDetail.vue';
import OutboundDetail from '../warehouse/OutboundDetail.vue';
import OutboundOrder from '../warehouse/OutboundOrder.vue';
import InventoryCount from '../warehouse/InventoryCount.vue';
import SupplierManagement from '../purchase/SupplierManagement.vue';
// import PurchaseRequisition from '../purchase/PurchaseRequisition.vue'; // 已删除
import PurchaseOrder from '../purchase/PurchaseOrder.vue';
import PurchaseInbound from '../purchase/PurchaseStorage.vue';
import PurchaseDemand from '../purchase/PurchaseDemand.vue';
import PurchaseReturn from '../purchase/PurchaseReturn.vue';
import CustomersToBeReconciled from '../finance/CustomersToBeReconciled.vue';
import CustomerStatement from '../finance/CustomerStatement.vue';
import CustomerReconciliationDetail from '../finance/CustomerReconciliationDetail.vue';
import SuppliersToBeReconciled from '../finance/SuppliersToBeReconciled.vue';
import SupplierStatement from '../finance/SupplierStatement.vue';
import SupplierReconciliationDetail from '../finance/SupplierReconciliationDetail.vue';
import AccountsReceivableDetail from '../finance/AccountsReceivableDetail.vue';
import AccountsPayableDetail from '../finance/AccountsPayableDetail.vue';
import Receipt from '../finance/Receipt.vue';
import PaymentWriteOff from '../finance/PaymentWriteOff.vue';
import PaymentOrder from '../finance/PaymentOrder.vue';
import ProductManagement from '../database/ProductManagement.vue';
import BOMManagement from '../database/BOMManagement.vue';
import ProcessManagement from '../database/ProcessManagement.vue';
import UnitLibrary from '../database/UnitLibrary.vue';
import TechnologyManagement from '../database/TechnologyManagement.vue';
import WarehouseManagement from '../database/WarehouseManagement.vue';
import WorkshopManagement from '../database/WorkshopManagement.vue';
import EquipmentManagement from '../database/EquipmentManagement.vue';
import AccountManagement from '../settings/AccountManagement.vue';
import RoleManagement from '../settings/RoleManagement.vue';
import DepartmentManagement from '../settings/DepartmentManagement.vue';
import MessageNotifications from '../settings/MessageNotifications.vue';
import Profile from '../settings/Profile.vue';
import OperationLogs from '../settings/OperationLogs.vue';
import SteelAnalysis from '@/components/SteelAnalysis.vue';
import ReportCenter from '@/components/ReportCenter.vue';
import DataAnalysis from '@/components/DataAnalysis.vue';
import SystemSettings from '@/components/SystemSettings.vue';
import AIAssistant from '../ai/AIAssistant.vue';

export default {
  name: 'Dashboard',
  components: {
    SalesWorkbench,
    ProcurementWorkbench,
    DashboardContent,
    CeoDashboard,
    CustomerManagement,
    QuotationManagement,
    QuotationDetail,
    SalesOrder,
    SalesDetail,
    ShippingDetail,
    DeliveryManagement,
    ProductionPlan,
    ProductionWorkOrder,
    ProcessTask,
    ProductionReporting,
    ProductionPicking,
    ProductionWarehousing,
    InventoryDetail,
    InboundOrder,
    InboundDetail,
    OutboundDetail,
    OutboundOrder,
    InventoryCount,
    SupplierManagement,
    // PurchaseRequisition, // 已删除
    PurchaseOrder,
    PurchaseInbound,
    PurchaseDemand,
    PurchaseReturn,
    CustomersToBeReconciled,
    CustomerStatement,
    CustomerReconciliationDetail,
    SuppliersToBeReconciled,
    SupplierStatement,
    SupplierReconciliationDetail,
    AccountsReceivableDetail,
    AccountsPayableDetail,
    Receipt,
    PaymentWriteOff,
    PaymentOrder,
    ProductManagement,
    BOMManagement,
    ProcessManagement,
    UnitLibrary,
    TechnologyManagement,
    WarehouseManagement,
    WorkshopManagement,
    EquipmentManagement,
    AccountManagement,
    RoleManagement,
    DepartmentManagement,
    MessageNotifications,
    Profile,
    OperationLogs,
    SteelAnalysis,
    ReportCenter,
    DataAnalysis,
    SystemSettings,
    AIAssistant,
  },
  data() {
    return {
      activeModule: 'workplace',
      activeView: 'DashboardContent',
      activeSubMenu: 'CEO看板',
      menuItems: [
        { id: 'workplace', name: '工作台', icon: 'icon-workplace' },
        { id: 'sales', name: '销售', icon: 'icon-sales' },
        { id: 'production', name: '生产', icon: 'icon-production' },
        { id: 'warehouse', name: '仓储', icon: 'icon-warehouse' },
        { id: 'purchase', name: '采购', icon: 'icon-purchase' },
        { id: 'finance', name: '财务', icon: 'icon-finance' },
        { id: 'database', name: '信息库', icon: 'icon-database' },
        { id: 'ai', name: 'AI助手', icon: 'icon-ai' },
        { id: 'settings', name: '设置', icon: 'icon-settings' }
      ]
    }
  },
  computed: {
    currentModuleContent() {
      const moduleContents = {
        workplace: this.getWorkplaceContent(),
        sales: this.getSalesContent(),
        production: this.getProductionContent(),
        warehouse: this.getWarehouseContent(),
        purchase: this.getPurchaseContent(),
        finance: this.getFinanceContent(),
        database: this.getDatabaseContent(),
        ai: this.getAIContent(),
        settings: this.getSettingsContent()
      }
      return moduleContents[this.activeModule] || moduleContents.workplace
    }
  },
  methods: {
    setActiveModule(moduleId) {
      this.activeModule = moduleId;
      // Reset to default view when switching main modules
      this.activeView = 'DashboardContent';
      // Reset active sub menu based on the new module's default
      const newContent = this.currentModuleContent;
      if (newContent.groups && newContent.groups.length > 0) {
        // Reset all groups to be open
        newContent.groups.forEach(group => {
          group.isOpen = true;
        });

        if (newContent.groups[0].items && newContent.groups[0].items.length > 0) {
          const firstItem = newContent.groups[0].items.find(item => item.active) || newContent.groups[0].items[0];
          this.activeSubMenu = firstItem.name;
          // Set the default view based on the first item
          this.handleSubMenuClick(firstItem, false); // Pass false to avoid resetting groups
        }
      }
    },
    handleSubMenuClick(item, resetGroups = true) {
      this.activeSubMenu = item.name;
      if (item.name === '销售工作台') {
        this.activeView = 'SalesWorkbench';
      } else if (item.name === '采购工作台') {
        this.activeView = 'ProcurementWorkbench';
      } else if (item.name === '客户管理') {
        this.activeView = 'CustomerManagement';
      } else if (item.name === '报价单') {
        this.activeView = 'QuotationManagement';
      } else if (item.name === '报价明细') {
        this.activeView = 'QuotationDetail';
      } else if (item.name === '销售订单') {
        this.activeView = 'SalesOrder';
      } else if (item.name === '销售明细') {
        this.activeView = 'SalesDetail';
      } else if (item.name === '发货单') {
        this.activeView = 'DeliveryManagement';
      } else if (item.name === '发货明细') {
        this.activeView = 'ShippingDetail';
      } else if (item.name === '生产计划') {
        this.activeView = 'ProductionPlan';
      } else if (item.name === '生产工单') {
        this.activeView = 'ProductionWorkOrder';
      } else if (item.name === '工序任务') {
        this.activeView = 'ProcessTask';
      } else if (item.name === '生产报工') {
        this.activeView = 'ProductionReporting';
      } else if (item.name === '生产领料') {
        this.activeView = 'ProductionPicking';
      } else if (item.name === '生产入库') {
        this.activeView = 'ProductionWarehousing';
      } else if (item.name === '库存明细') {
        this.activeView = 'InventoryDetail';
      } else if (item.name === '入库单') {
        this.activeView = 'InboundOrder';
      } else if (item.name === '入库明细') {
        this.activeView = 'InboundDetail';
      } else if (item.name === '出库明细') {
        this.activeView = 'OutboundDetail';
      } else if (item.name === '出库单') {
        this.activeView = 'OutboundOrder';
      } else if (item.name === '库存盘点') {
        this.activeView = 'InventoryCount';
      } else if (item.name === '采购供应商') {
        this.activeView = 'SupplierManagement';
      // } else if (item.name === '采购需求') {
      //   this.activeView = 'PurchaseRequisition'; // 已删除
      } else if (item.name === '采购需求') {
        this.activeView = 'PurchaseDemand';
      } else if (item.name === '采购订单') {
        this.activeView = 'PurchaseOrder';
      } else if (item.name === '采购入库') {
        this.activeView = 'PurchaseInbound';
      } else if (item.name === '采购退货') {
        this.activeView = 'PurchaseReturn';
      } else if (item.name === '待对账客户') {
        this.activeView = 'CustomersToBeReconciled';
      } else if (item.name === '客户对账单') {
        this.activeView = 'CustomerStatement';
      } else if (item.name === '客户对账明细') {
        this.activeView = 'CustomerReconciliationDetail';
      } else if (item.name === '待对账供应商') {
        this.activeView = 'SuppliersToBeReconciled';
      } else if (item.name === '供应商对账单') {
        this.activeView = 'SupplierStatement';
      } else if (item.name === '供应商对账明细') {
        this.activeView = 'SupplierReconciliationDetail';
      } else if (item.name === '应收明细') {
        this.activeView = 'AccountsReceivableDetail';
      } else if (item.name === '应付明细') {
        this.activeView = 'AccountsPayableDetail';
      } else if (item.name === '产品管理') {
        this.activeView = 'ProductManagement';
      } else if (item.name === 'BOM管理') {
        this.activeView = 'BOMManagement';
      } else if (item.name === '工序管理') {
        this.activeView = 'ProcessManagement';
      } else if (item.name === '单位库') {
        this.activeView = 'UnitLibrary';
      } else if (item.name === '工艺管理') {
        this.activeView = 'TechnologyManagement';
      } else if (item.name === '仓库管理') {
        this.activeView = 'WarehouseManagement';
      } else if (item.name === '车间管理') {
        this.activeView = 'WorkshopManagement';
      } else if (item.name === '设备管理') {
        this.activeView = 'EquipmentManagement';
      } else if (item.name === '账号管理') {
        this.activeView = 'AccountManagement';
      } else if (item.name === '角色管理') {
        this.activeView = 'RoleManagement';
      } else if (item.name === '部门管理') {
        this.activeView = 'DepartmentManagement';
      } else if (item.name === '消息通知') {
        this.activeView = 'MessageNotifications';
      } else if (item.name === '个人信息') {
        this.activeView = 'Profile';
      } else if (item.name === '操作日志') {
        this.activeView = 'OperationLogs';
      } else if (item.name === '收款单') {
        this.activeView = 'Receipt';
      } else if (item.name === '收款核销') {
        this.activeView = 'PaymentWriteOff';
      } else if (item.name === '付款单') {
        this.activeView = 'PaymentOrder';
      } else if (item.name === '付款核销') {
        this.activeView = 'PaymentWriteOff';
      } else if (item.name === 'CEO看板') {
        this.activeView = 'DashboardContent';
      } else if (item.name === '钢材分析') {
        this.activeView = 'SteelAnalysis';
      } else if (item.name === '报表中心') {
        this.activeView = 'ReportCenter';
      } else if (item.name === '数据分析') {
        this.activeView = 'DataAnalysis';
      } else if (item.name === '系统设置') {
        this.activeView = 'SystemSettings';
      } else if (item.name === 'AI助手') {
        this.activeView = 'AIAssistant';
      } else {
        this.activeView = 'DashboardContent';
      }
    },
    toggleGroup(group) {
      group.isOpen = !group.isOpen
    },
    getWorkplaceContent() {
      return {
        title: '工作�?',
        groups: [
          {
            title: '常用功能',
            isOpen: true,
            items: [
              { name: 'CEO看板', active: true },
              { name: '销售工作台' },
              { name: '采购工作台'},
              { name: '生产工作台' },
              { name: '财务工作台'}
            ]
          }
        ]
      }
    },
    getSalesContent() {
      return {
        title: '销售管理',
        groups: [
          {
            title: '销售管理',
            isOpen: true,
            items: [
              { name: '客户管理' },
              { name: '报价单' },
              { name: '报价明细' },
              { name: '销售订单'},
              { name: '销售明细'},
              { name: '发货单' },
              { name: '发货明细' }
            ]
          }
        ]
      }
    },
    getProductionContent() {
      return {
        title: '生产管理',
        groups: [
          {
            title: '生产管理',
            isOpen: true,
            items: [
              { name: '生产计划' },
              { name: '生产工单' },
              { name: '工序任务' },
              { name: '生产报工' },
              { name: '生产领料' },
              { name: '生产入库' }
            ]
          }
        ]
      }
    },
    getWarehouseContent() {
      return {
        title: '仓储管理',
        groups: [
          {
            title: '仓储管理',
            isOpen: true,
            items: [
              { name: '库存明细' },
              { name: '入库单' },
              { name: '入库明细' },
              { name: '出库单' },
              { name: '出库明细' },
              { name: '库存盘点' }
            ]
          }
        ]
      }
    },
    getPurchaseContent() {
      return {
        title: '采购管理',
        groups: [
          {
            title: '采购管理',
            isOpen: true,
            items: [
              { name: '采购供应商' },
              { name: '采购需求' },
              { name: '采购订单' },
              { name: '采购入库' },
              { name: '采购退货' }
            ]
          }
        ]
      }
    },
    getFinanceContent() {
      return {
        title: '财务管理',
        groups: [
          {
            title: '对账管理',
            isOpen: true,
            items: [
              { name: '待对账客户'},
              { name: '客户对账单'},
              { name: '客户对账明细' },
              { name: '待对账供应商' },
              { name: '供应商对账单' },
              { name: '供应商对账明细' },
              { name: '应收明细' },
              { name: '应付明细' },
            ]
          },
          {
            title: '收支管理',
            isOpen: true,
            items: [

              { name: '收款单' },
              { name: '收款核销' },
              { name: '付款单' },
              { name: '付款核销' }
            ]
          }
        ]
      }
    },
    getDatabaseContent() {
      return {
        title: '信息库',
        groups: [
          {
            title: '信息库',
            isOpen: true,
            items: [
              { name: '产品管理' },
              { name: 'BOM管理' },
              { name: '工序管理' },
              { name: '工艺管理' },
              { name: '单位库' },
              { name: '仓库管理' },
              { name: '车间管理' },
              { name: '设备管理' }
            ]
          }
        ]
      }
    },
    getAIContent() {
      return {
        title: 'AI助手',
        groups: [
          {
            title: 'AI助手',
            isOpen: true,
            items: [
              { name: 'AI助手', active: true }
            ]
          }
        ]
      }
    },
    getSettingsContent() {
      return {
        title: '系统设置',
        groups: [
          {
            title: '系统设置',
            isOpen: true,
            items: [
              { name: '账号管理' },
              { name: '角色管理' },
              { name: '部门管理' },
              { name: '操作日志' },
              { name: '消息通知' },
              { name: '个人信息' }
            ]
          }
        ]
      }
    },

    /**
     * 处理来自子组件的导航事件
     */
    handleNavigate(moduleName) {
      // 创建一个模拟的菜单项对象
      const item = { name: moduleName }
      // 调用现有的菜单点击处理方法
      this.handleSubMenuClick(item)
    }
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  min-height: 100vh;
  background: #f5f5f5;
}

.sidebar {
  width: 94px;
  background: #4a5568;
  color: white;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #2d3748;
}

.logo svg {
  display: block;
  margin: 0 auto;
}

.sidebar-nav {
  padding: 10px 0;
  flex: 1;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 8px;
  color: #a0aec0;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: none;
  text-decoration: none;
}

.nav-item:hover {
  background: #2d3748;
  color: white;
}

.nav-item.active {
  background: #3182ce;
  color: white;
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  font-size: 20px;
}

.nav-text {
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
}

/* 图标样式 */
.icon-workplace::before { content: "📊"; }
.icon-sales::before { content: "🏷�?"; }
.icon-production::before { content: "⚙️"; }
.icon-warehouse::before { content: "📦"; }
.icon-purchase::before { content: "🚚"; }
.icon-finance::before { content: "💰"; }
.icon-database::before { content: "📋"; }
.icon-ai::before { content: "🤖"; }
.icon-settings::before { content: "⚙️"; }

/* 左中栏样�?*/
.middle-sidebar {
  width: 200px;
  background: #f7fafc;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
}

.module-header {
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
  background: white;
}

.module-header h3 {
  margin: 0;
  font-size: 16px;
  color: #2d3748;
  font-weight: 600;
}

.module-menu {
  padding: 10px 0;
}

.module-group {
  margin-bottom: 5px;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  color: #4a5568;
  transition: background 0.2s ease;
}

.group-header:hover {
  background: #edf2f7;
}

.toggle-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #718096;
  transition: transform 0.3s ease;
}

.toggle-icon.is-open {
  transform: rotate(180deg);
}

.group-items {
  padding-left: 10px;
  overflow: hidden;
}

.module-item {
  padding: 12px 20px;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.module-item:hover {
  background: #edf2f7;
  color: #2d3748;
}

.module-item.active {
  background: #ebf8ff;
  color: #3182ce;
  border-left-color: #3182ce;
  font-weight: 500;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}


.stats-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stats-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: white;
}

.stats-card-blue { background: linear-gradient(135deg, #42A5F5, #1E88E5); }
.stats-card-green { background: linear-gradient(135deg, #66BB6A, #43A047); }
.stats-card-blue-2 { background: linear-gradient(135deg, #26C6DA, #00ACC1); }
.stats-card-red { background: linear-gradient(135deg, #EF5350, #E53935); }
.stats-card-orange { background: linear-gradient(135deg, #FFA726, #FF9800); }
.stats-card-purple { background: linear-gradient(135deg, #AB47BC, #8E24AA); }

.stats-content {
  flex: 1;
}

.stats-title {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 5px;
}

.stats-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stats-period {
  font-size: 12px;
  opacity: 0.8;
}

.stats-icon {
  font-size: 24px;
  opacity: 0.8;
}

.charts-section {
  margin-bottom: 30px;
}

.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-row:last-child {
  grid-template-columns: 1fr 1fr 1fr;
}

.chart-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.chart-legend {
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 5px;
}

.legend-purple { background: #9C27B0; }
.legend-blue { background: #2196F3; }
.legend-light-blue { background: #64B5F6; }
.legend-red { background: #F44336; }

.chart-content {
  height: 200px;
  position: relative;
}

.pie-chart {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pie-legend {
  flex: 1;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pie-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.pie-color-1 { background: #4CAF50; }

.stats-table .chart-content {
  height: auto;
}

.stats-list {
  margin-top: 10px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.stats-row:last-child {
  border-bottom: none;
}

.stats-label {
  color: #666;
  font-size: 14px;
}

.stats-number {
  font-weight: bold;
  color: #333;
}

.stats-percent {
  color: #666;
  font-size: 12px;
}

.table-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.table-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.table-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.table-select, .table-search {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.table-search {
  width: 200px;
}

.search-btn {
  background: #2196F3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.reset-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background: #f8f9fa;
  font-weight: 500;
  color: #333;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-green {
  background: #e8f5e8;
  color: #4caf50;
}

.status-orange {
  background: #fff3e0;
  color: #ff9800;
}

.status-red {
  background: #ffebee;
  color: #f44336;
}

.status-gray {
  background: #f5f5f5;
  color: #666;
}

.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-controls {
  display: flex;
  gap: 5px;
  align-items: center;
}

.page-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}

.page-btn:hover {
  background: #f5f5f5;
}

.page-btn:first-child {
  background: #2196F3;
  color: white;
  border-color: #2196F3;
}
</style>
